<template>
	<view class="user-container">
		<!-- 第一部分：用户信息 -->
		<view class="user-info-section">
			<view class="user-header">
				<view class="avatar-wrapper">
					<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				</view>
				<view class="user-detail">
					<view class="username-wrapper" @click="handleUserClick">
						<text class="username">{{userInfo.openid ? userInfo.openid.substring(0, 6) + '...' : '未登录'}}</text>
						<text v-if="userInfo.id" class="user-id">ID: {{userInfo.id}}</text>
						<button v-if="userInfo.openid" class="logout-btn" @click.stop="handleLogout">退出登录</button>
						<!-- <button v-if="!userInfo.nickname" class="auth-btn" open-type="getUserInfo" @getuserinfo="onGetUserInfo">微信授权</button> -->
					</view> 
					<view class="user-stats">
						<view class="stat-item" clickable @click="navigateTo('/pages/index/stores')">
							<text class="stat-num">{{userInfo.dynamicCount || 0}}</text>
							<text class="stat-label">动态</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 第二部分：拍卖相关 -->
		<view class="menu-section">
			<view class="menu-grid">
				<view class="menu-item" clickable @click="navigateTo('/pages/user/allsell')">
					<image src="/static/icons/all-auction.png" mode="aspectFit"></image>
					<text>全部拍卖</text>
				</view>
				<view class="menu-item" clickable @click="navigateTo('/pages/user/selling')">
					<image src="/static/icons/create-auction.png" mode="aspectFit"></image>
					<text>发起拍卖</text>
				</view>
				<view class="menu-item" clickable @click="navigateTo('/pages/user/record')">
					<image src="/static/icons/win-record.png" mode="aspectFit"></image>
					<text>中标记录</text>
				</view>
			</view>
		</view>
		
		<view class="menu_box">
			<uni-list>
				<uni-list-item 
					:show-extra-icon="true" 
					showArrow 
					:extra-icon="{color: '#4a90e2', size: '22', type: 'wallet'}" 
					title="保证金管理" 
					clickable @click="navigateTo('/pages/user/bond')"
				/>
				<uni-list-item 
					:show-extra-icon="true" 
					showArrow 
					:extra-icon="{color: '#4a90e2', size: '22', type: 'help'}" 
					title="常见问题" 
					clickable @click="navigateTo('/pages/user/problem')"
				/>
				<uni-list-item 
					:show-extra-icon="true" 
					showArrow 
					:extra-icon="{color: '#4a90e2', size: '22', type: 'chat'}" 
					title="联系客服" 
					clickable @click="contactService"
				/>
				<uni-list-item 
					:show-extra-icon="true" 
					showArrow 
					:extra-icon="{color: '#4a90e2', size: '22', type: 'info'}" 
					title="收费服务" 
					clickable @click="navigateTo('/pages/user/money')"
				/>
			</uni-list>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				nickname: '',
				dynamicCount: 0,
				openid: ''
			}
		}
	},
	computed: {
		...mapState(['isLogin'])
	},
	onLoad() {
		this.getUserInfo()
	},
	onShow() {
		this.getUserInfo()
	},
	methods: {
		...mapMutations(['setUserInfo']),
		getUserInfo() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userInfo = userInfo
				this.setUserInfo(userInfo)
			}
		},
		async onGetUserInfo(e) {
			const userInfo = e.detail.userInfo
			if (!userInfo) {
				uni.showToast({
					title: '您拒绝了授权',
					icon: 'none'
				})
				return
			}
			
			try {
				// 获取微信code
				const [err, res] = await uni.login({
					provider: 'weixin'
				})
				if (err) throw err
				
				// 调用后端登录接口
				const loginRes = await uni.request({
					url: 'http://192.168.18.58:8080/user/login',
					method: 'POST',
					data: {
						code: res.code,
						userInfo: userInfo
					}
				})
				
				if (loginRes[1].data.code === 200) {
					// 登录成功处理
					this.setUserInfo(loginRes[1].data.data)
					uni.setStorageSync('userInfo', loginRes[1].data.data)
					uni.setStorageSync('token', loginRes[1].data.token)
					
					this.userInfo = loginRes[1].data.data
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
				} else {
					throw new Error(loginRes[1].data.message || '登录失败')
				}
			} catch (error) {
				console.error('登录失败:', error)
				uni.showToast({
					title: error.message || '登录失败',
					icon: 'none'
				})
			}
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		contactService() {
			// 这里添加联系客服的逻辑
			uni.showToast({
				title: '正在连接客服...',
				icon: 'none'
			})
		},
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					// 这里可以添加上传到服务器的逻辑
					// 示例：直接使用本地图片
					this.userInfo.avatar = tempFilePath
					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					})
				},
				fail: (err) => {
					console.error('选择图片失败：', err)
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					})
				}
			})
		},
		handleUserClick() {
			if (!this.userInfo.id) {
				this.navigateTo('/pages/login/login')
			} else {
				this.navigateTo('/pages/login/person')
			}
		},
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除用户信息
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('token')
						this.userInfo = {
							avatar: '',
							nickname: '',
							dynamicCount: 0,
							openid: ''
						}
						this.setUserInfo(null)
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
	.user-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding-bottom: 20rpx;
	}

	.user-info-section {
		background: linear-gradient(135deg, #558ceb 0%,#b850af 100%);
		padding: 60rpx 40rpx;
		margin-bottom: 30rpx;
		border-radius: 0 0 30rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.user-header {
			display: flex;
			align-items: center;

			.avatar-wrapper {
				position: relative;
				width: 140rpx;
				height: 140rpx;
				margin-right: 30rpx;
				
				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 4rpx solid rgba(255, 255, 255, 0.3);
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				}
			}

			.user-detail {
				flex: 1;

				.username-wrapper {
					position: relative;
					display: flex;
					align-items: center;
					
					.auth-btn {
						margin-left: 20rpx;
						font-size: 24rpx;
						color: #4a90e2;
						background: none;
						border: none;
						padding: 0;
						line-height: 1;
						
						&::after {
							border: none;
						}
					}
				}

				.username {
					font-size: 32rpx;
					font-weight: bold;
					color: #ffffff;
					margin-bottom: 10rpx;
					display: block;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				.user-id {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					display: block;
					margin-bottom: 20rpx;
				}

				.logout-btn {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					font-size: 24rpx;
					color: #ffffff;
					background: rgba(255, 255, 255, 0.2);
					border: none;
					padding: 8rpx 20rpx;
					border-radius: 30rpx;
					
					&::after {
						border: none;
					}
					
					&:active {
						background: rgba(255, 255, 255, 0.3);
					}
				}

				.user-stats {
					display: flex;

					.stat-item {
						margin-right: 40rpx;
						background: rgba(255, 255, 255, 0.2);
						padding: 10rpx 20rpx;
						border-radius: 30rpx;

						.stat-num {
							font-size: 32rpx;
							color: #ffffff;
							font-weight: bold;
						}

						.stat-label {
							font-size: 24rpx;
							color: rgba(255, 255, 255, 0.8);
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.menu-section {
		background-color: #ffffff;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.menu-grid {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 33.33%;
				padding: 20rpx;
				border-radius: 16rpx;
				transition: all 0.3s ease;

				&:active {
					background-color: rgba(74, 144, 226, 0.1);
					transform: scale(0.95);
				}

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 16rpx;
					transition: transform 0.3s ease;
				}

				text {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	.menu_box {
		background-color: #ffffff;
		margin: 0 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		:deep(.uni-list-item) {
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			transition: background-color 0.3s ease;

			&:active {
				background-color: rgba(74, 144, 226, 0.1);
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}
</style>
